<!--
 * @Author: ssj
 * @Date: 2021-06-26 17:51:15
 * @LastEditors: wiz
 * @LastEditTime: 2023-12-07 11:58:57
 * @Description: 
-->
<template>
  <div class="init-container">
    <Tabs type="card" :animated="false" v-model="tabPanelName">
      <TabPane
        :label="$srv.getI18nByPath(itm.category)"
        v-for="(itm, index) of components"
        :name="itm.category"
        :key="index"
      >
        <div class="compo-func-body" v-if="isShow">
          <div class="compo-cell" v-for="(item, idx) of itm.comps" :key="idx">
            <span>{{
              $srv.getI18nByPath('system.components.' + item.name.toLowerCase())
            }}</span>
            <div
              class="compo-cell draggable"
              :draggable="draggable"
              @dragstart="
                compoDragStart($event, 'new_' + item.name + '_' + item.moduleID)
              "
            >
              <span>{{
                $srv.getI18nByPath(
                  'system.components.' + item.name.toLowerCase()
                )
              }}</span>
            </div>
          </div>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, I_command, N_oSetupPanel } from './config';

interface I_compItem {
  category: string;
  comps: Array<
    N_oSetupPanel.N_comps.I_compItem<N_oSetupPanel.N_comps.I_compConfs>
  >;
}
@T_srv.comp
export default class ComponentsPanel extends vue {
  @T_srv.prop() readonly isShow!: boolean;

  private components: Array<I_compItem> = [];

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Boolean,
    default: false
  })
  draggable: boolean;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private G_compName: string = 'ComponentsPanel';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private GT_command: I_command;

  public tabPanelName: string = null;

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command = this.GT_compBox.getCompMergeName(
      this.G_compID,
      'oSetupPanelCMD'
    );
    this.getCompPanelItem();
  }

  public getCompPanelItem() {
    const m = new Map<
      string,
      Array<N_oSetupPanel.N_comps.I_compItem<N_oSetupPanel.N_comps.I_compConfs>>
    >();

    this.GT_command.Tsetup.component.list.forEach(e => {
      // if (e.category=N_oSetupPanel.N_comps.COMP_CATEGORY.BASE_DATA){
      if (m.has(e.category)) {
        m.get(e.category).push(e);
      } else {
        const arr = [e];
        m.set(e.category, arr);
      }
    });

    m.forEach((v, k) => {
      const itm: I_compItem = {
        category: '',
        comps: []
      };
      switch (k) {
        case N_oSetupPanel.N_comps.COMP_CATEGORY.BASE_DATA:
          itm.category = 'oSetupPanel.compPanel.category.baseData';
          itm.comps = v;
          break;
        case N_oSetupPanel.N_comps.COMP_CATEGORY.CONTAINER:
          itm.category = 'oSetupPanel.compPanel.category.container';
          itm.comps = v;
          break;
        case N_oSetupPanel.N_comps.COMP_CATEGORY.GRAPH:
          itm.category = 'oSetupPanel.compPanel.category.graph';
          itm.comps = v;
          break;
        case N_oSetupPanel.N_comps.COMP_CATEGORY.NAV:
          itm.category = 'oSetupPanel.compPanel.category.nav';
          itm.comps = v;
          break;
        case N_oSetupPanel.N_comps.COMP_CATEGORY.SINGLE_FUN:
          itm.category = 'oSetupPanel.compPanel.category.singleFun';
          itm.comps = v;
          break;
        default:
          this.$msg(`-118,FE,90,*${k}#`);
          throw new Error(`不能识别的参数[${k}]`);
      }

      this.components.push(itm);
    });
  }

  destroyed() {
    /* 注册组件销毁 */

    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName,'funName'); */

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }

    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }

  mounted() {
    this.G_compName = this.G_compName;
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
  }

  public setDraggable(p: boolean) {
    this.draggable = p;
  }

  public compoDragStart(e: any, id: string) {
    e.dataTransfer.setData('compname_moduleid', id);
  }
}
</script>
<style scoped lang="scss">
.init-container {
  padding: unset;
  border: 1px solid #f1f1f1;
  background-color: #fff;
  ::v-deep .ivu-tabs-nav-scroll {
    background-color: #f2f2f2 !important;
    height: 30px;
    padding: 0px;
  }
  .compo-func-body {
    padding: 15px 20px;
    color: rgb(231, 231, 231);
    overflow-y: auto;
    display: flex;
    .compo-cell {
      background-color: #e5e5e5;
      height: 30px;
      padding: 0 20px;
      pointer-events: none;
      border-radius: 5px;
      cursor: grab;
      text-align: center;
      line-height: 25px;
      color: #555;
      position: relative;
      margin: 0 10px;
      span {
        pointer-events: none;
        user-select: none;
      }
      .draggable {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        pointer-events: auto;
        border-radius: 5px;
        overflow: hidden;
        top: 0;
        left: 0;
      }
    }
  }
}
</style>
